<template>
    <div class="login" :style="{height:height}">
        <div class="card" :padding="30">
            <img style="width:auto;height:70px;display:block;margin:0 auto" src="../assets/logo.jpg" alt="logo">
            <div style="font-size: 14px;color: #808695;text-align:center;padding:20px;color: white;">这将会是一个很大很大的项目</div>
            <Form ref="formItem" :model="userInfo" :label-width="0">
                <FormItem prop="username">
                    <Input size="large" placeholder="请输入账号" v-model="userInfo.username">
                        <Icon type="ios-contact" slot="prefix"/>
                    </Input>
                </FormItem>
                <FormItem prop="password">
                    <Input size="large" placeholder="请输入密码" v-model="userInfo.password" type="password">
                        <Icon type="ios-lock" slot="prefix"/>
                    </Input>
                </FormItem>
            </Form>
            <div class="flexBetween">
                <Checkbox class="automatic" size="large" v-model="single">自动登录</Checkbox>
                <span class="forget" @click="forgetPassword">忘记密码</span>
            </div>
            <Button type="primary" size="large" @click="handleSubmit" class="loginButton">登录</Button>
        </div>
        <div class="footer">
            Copyright ©2022,All Rights Resvered
            <span class="blue">豫ICP备2021030532号-1</span>
        </div>
    </div>
</template>

<script>
    import {login, getInfo, logout} from '@/api/login';

    export default {
        name: "Login",
        data() {
            return {
                //登录界面高度
                height: "",
                single: false,
                // 表单
                userInfo: {
                    username: "admin",
                    password: "123456",
                },
            };
        },
        beforeMount() {
            this.height = document.documentElement.clientHeight + 'px'; // 初始化页面高度
        },
        mounted() {
            window.addEventListener('resize', () => {
                return (() => {
                    this.height = document.documentElement.clientHeight + 'px'
                })();
            }, false)

            //绑定事件
            window.addEventListener('keydown',this.keyDown);
        },
        methods: {
            // 提交表单
            async handleSubmit() {
                this.$store.dispatch('user/login', this.userInfo).then(data => {
                    // 用户按钮信息
                    // this.$store.dispatch('FindButtons', {}).then(() => {})
                    localStorage.setItem("accessToken",data.accessToken)
                    localStorage.setItem("user",data. user)
                    this.$router.push({path: this.redirect || '/'});
                    console.log("data ",data);

                }).catch(() => {
                    this.loading = false
                })
            },
            // 点击Enter登录
            keyDown(e){
                //如果是回车则执行登录方法
                if(e.keyCode == 13){
                    this.handleSubmit();
                }
            },
            forgetPassword(){
                this.$layer.msg("暂时禁用", {icon: 1, time: 3});
            }
        },
    };
</script>

<style scoped>
    .loginButton {
        width: 100%;
    }

    .card {
        width: 320px;
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);
        /*padding: 20px;*/
        /*background-color: peru;*/
    }

    .login {
        height: 100%;
        width: 100%;
        background: url("../assets/image/bg.jpeg") no-repeat center;
        background-size: 100% 100%;
        min-width: 540px;
        min-height: 618px;
    }

    .footer {
        width: 100%;
        position: absolute;
        bottom: 20px;
        left: 0;
        color: #fff;
        text-align: center;
    }

    .automatic{
        color: white;
    }

    .forget{
        color: white;
        font-size: 16px;
        position: absolute;
        right: 0;
    }

</style>
